<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('树形列表异步加载')}`">{{ $t('树形列表异步加载') }}</t>
            <li>
                树形列表支持异步加载。 你可以设置
                <span class="s-code">Table</span>的
                <span class="d-code">lazy</span>属性为<span class="s-code">true</span>
                并结合加载函数<span class="d-code">load</span>一起使用。
                此外，你需要在<span class="s-code">行数据row</span>内声明该行是否还存在<span class="s-code">children</span>，以便通知组件内部是否显示展开按钮；
                默认情况下，组件内部根据<span class="s-code">行数据row</span>里的<span class="s-code">hasChildren</span>是否为
                <span class="s-code">true</span>来判断是否显示展开按钮
            </li>
            <li>
                <span class="s-code">行数据row</span>里的子行列表的字段名如果不是叫做<span class="s-code">children</span>，
                那么你可以通过<span class="d-code">tree-props</span>指定对应的键名，
                <span class="s-code">tree-props</span>的默认值为
                <span class="s-code">{ children: 'children', hasChildren: 'hasChildren' }</span>
            </li>
        </template>
        <sib-table
            lazy
            row-key="rowId"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData"
            :load="onLoad">
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(5).fill().map((_, i) => ({
            rowId: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            hasChildren: i < 3,
        })));

        return {
            indexConfig: { type: 'hidden' },
            tableColumn: [
                { label: '姓名', code: 'name', width: 300 },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData,
            onLoad(row, treeNode, resolve) {
                // 记录当前层级，插入到 row
                const currentLevel = (row.currentLevel || 0) + 1;
                setTimeout(() => {
                    resolve([
                        {
                            rowId: `${row.rowId}-1`,
                            name: `${row.name}的崽崽`,
                            height: 90,
                            age: 2,
                            children: [],
                            // 层级 < 3 时，允许显示展开图标
                            hasChildren: currentLevel < 3,
                            currentLevel,
                        },
                    ]);
                }, 1000);
            },
            templateString: `<template>
    <div class="example-box">
        <sib-table
            lazy
            row-key="rowId"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData"
            :load="onLoad">
        </sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const tableData = ref(Array(5).fill().map((_, i) => ({
            rowId: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            hasChildren: i < 3,
        })));

        return {
            indexConfig: { type: 'hidden' },
            tableColumn: [
                { label: '姓名', code: 'name', width: 300 },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData,
            onLoad(row, treeNode, resolve) {
                // 记录当前层级，插入到 row
                const currentLevel = (row.currentLevel || 0) + 1;
                setTimeout(() => {
                    resolve([
                        {
                            rowId: \`\${row.rowId}-1\`,
                            name: \`\${row.name}的崽崽\`,
                            height: 90,
                            age: 2,
                            children: [],
                            // 层级 < 3 时，允许显示展开图标
                            hasChildren: currentLevel < 3,
                            currentLevel,
                        },
                    ]);
                }, 1000);
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
